<template>
  <div class="container">
    <p>安装: npm i -S vuedraggable</p>
    <p>
      案例:
      <a
        target="_black"
        href="http://www.ptbird.cn/vue-draggable-dragging.html#menu_index_2"
      >http://www.ptbird.cn/vue-draggable-dragging.html#menu_index_2</a>
    </p>
    <p>
      官方案例:
      <a
        target="_black"
        href="https://github.com/SortableJS/Vue.Draggable"
      >https://github.com/SortableJS/Vue.Draggable</a>
    </p>
    <vuedraggable class="wrapper" v-model="list">
      <transition-group>
        <div v-for="item in list" :key="item" class="item" :class="'item'+item">
          <!-- <p>{{item}}</p> -->
        </div>
      </transition-group>
    </vuedraggable>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable';

export default {
  components: {vuedraggable},
  props: {
  },
  data() {
    return {
      list:[1,2,3,4,5,6,7,8,9],
      listArr:[1,2,3,4,5,6,7,8,9]
    }
  },
  updated() {
    console.log(this.list)
    if(this.list.toString() == this.listArr.toString()){
      this.$message({
        message: '恭喜你，排列正确',
        type: 'success'
      });
    }
  },
  methods: {
    shuffle(arr) { 
      arr.sort(() => Math.random() - 0.5); 
    }
  },
  mounted(){
    this.shuffle(this.list);
    console.log(this.list)
  }
}
</script>
<style scoped lang="scss">
</style>